// src/routes/index.tsx
import React, { lazy, Suspense, FC } from "react"
import { useRoutes } from "react-router-dom"
import {
  HomeOutlined,
  ShopOutlined,
  DatabaseOutlined,
  UserOutlined,
  BarsOutlined,
  TableOutlined,
} from "@ant-design/icons"
import type { XRoutes } from "./types"

import {
  Layout,
  EmptyLayout,
  // CompLayout
} from "../layouts"
import Loading from "@comps/Loading"
import Redirect from "@comps/Redirect"
// 国际化处理文本
import type { ColumnsType } from "antd/lib/table"
import zhCN from "antd/lib/locale/zh_CN"
import en_US from "antd/lib/locale/en_US"

const Login = lazy(() => import("@/pages/order/orderInfo/login"))
const Dashboard = lazy(() => import("@pages/dashboard"))
const NotFound = lazy(() => import("@pages/404"))

// 引入路由组件
const HospitalSet = lazy(() => import("@pages/hospital/hospitalSet"))
const HospitalList = lazy(() => import("@pages/hospital/hospitalList"))
const Add = lazy(() => import("@pages/hospital/hospitalSet/commpent/add"))
// 医院列表
const detailsView = lazy(
  () => import("@pages/hospital/hospitalList/commpent/show")
)
const Scheduling = lazy(
  () => import("@pages/hospital/hospitalList/commpent/Scheduling")
)
// 数据
const Dict = lazy(() => import("@pages/cmn/dict"))
const AuthList = lazy(() => import("@/pages/user/authList/inedx"))
const UserInfo = lazy(() => import("@/pages/order/orderInfo"))
const OrderInfo = lazy(() => import("@/pages/user/orderInfo"))
const Order = lazy(() => import("@pages/statistics/order"))
const MemberList = lazy(() => import("@/pages/order/orderInfo/show"))
// const OrderInformation = lazy(() => import("@/pages/use"))

const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  )
}

// 路由表
const routes: XRoutes = [
  {
    path: "/",
    element: <EmptyLayout />,
    children: [
      {
        path: "login",
        element: load(Login),
      },
    ],
  },
  {
    path: "/syt",
    element: <Layout />,
    children: [
      // icon是图标，title是渲染sideBer里面的标题
      {
        path: "/syt/dashboard",
        meta: { icon: <HomeOutlined />, title: "首页" },
        element: load(Dashboard),
      },
      // 医院管理路由
      {
        path: "/syt/hospital",
        meta: { icon: <ShopOutlined />, title: "医院管理" },

        children: [
          {
            path: "/syt/hospital/hospitalSet",
            meta: { title: "医院设置" },
            element: load(HospitalSet),
          },
          {
            path: "/syt/hospital/hospitalSet/add",
            meta: { title: "添加医院" },
            element: load(Add),
            hidden: true, // 如果不需要导航渲染则设置为true
          },
          {
            path: "/syt/hospital/hospitalList",
            meta: { title: "医院列表" },
            element: load(HospitalList),
          },
          {
            path: "/syt/hospital/hospitalList/show/:id",
            meta: { title: "查看医院详情" },
            element: load(detailsView),
            hidden: true,
          },
          {
            path: "/syt/hospital/hospitalList/schedule/:hoscode",
            meta: { title: "查看医院排班" },
            element: load(Scheduling),
            hidden: true,
          },
        ],
      },
      {
        path: "/syt/cmn",
        meta: { icon: <DatabaseOutlined />, title: "数据管理" },
        // element: load(Dashboard),
        children: [
          {
            path: "/syt/cmn/dict",
            meta: { title: "数据字典" },
            element: load(Dict),
          },
        ],
      },
      {
        path: "/syt/user",
        meta: { icon: <UserOutlined />, title: "会员管理" },
        children: [
          {
            path: "/syt/user/userInfo",
            meta: { title: "会员列表" },
            element: load(UserInfo),
          },
          // {
          //   path: "/syt/user/userInfo/show/:id",
          //   meta: { title: "会员列表" },
          //   element: load(MemberList),
          //   hidden: true,
          // },
          {
            path: "/syt/user/authList",
            meta: { title: "认证审批列表" },
            element: load(AuthList),
          },
        ],
      },
      {
        path: "/syt/order",
        meta: { icon: <BarsOutlined />, title: "订单管理" },
        children: [
          {
            path: "/syt/order/orderInfo",
            meta: { title: "订单列表" },
            element: load(OrderInfo),
          },
          {
            path: "/syt/order/orderInfo/show/:id",
            meta: { title: "订单列表" },
            hidden: true,
            element: load(MemberList),
          },
        ],
      },

      {
        path: "/syt/statistics",
        meta: { icon: <TableOutlined />, title: "统计管理" },
        children: [
          {
            path: "/syt/statistics/order",
            meta: { title: "预约统计" },
            element: load(Order),
          },
        ],
      },
    ],
  },

  {
    path: "/404",
    element: load(NotFound),
  },
  {
    path: "*",
    element: <Redirect to="/404" />,
  },
]

// 渲染路由
// 注意：首字母必须大写
export const RenderRoutes = () => {
  // react-router-dom的新增语法。不用自己遍历了，它帮我们遍历生成
  return useRoutes(routes)
}

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => route.path === "/syt")
  return routes[currentIndex].children as XRoutes
}

export default routes
